<!DOCTYPE html>
<html lang="en">
  <head>
	<title>WS text</title>
	<meta charset="utf-8">
  </head>
<body>
<p>Test tries to open three different websockets.
</p>
<ul>
<li> ws1 General </li>
<li> ws2 Server approved subprotocol </li>
<li> ws3 Server unapproved subprotocol </li>
</ul>
<p>
Websocket initiates with sending "Ping me!" with signature.<br>
<br>They echo received messages, but react to: 
<br>&nbsp;&nbsp;&quot;<i id="exitmsg"></i>&quot;
<p>
<p id = "init"></p>
<p>&nbsp;&nbsp;This is <b id = "browserid"> ... </b></p>
<div id = "ws1" style="border:thick solid black;"><p>ws1 Websocket</p></div>
<div id = "ws2" style="border:thick solid black;"><p>ws2 Websocket: websocket-testprotocol</p></div>
<div id = "ws3" style="border:thick solid black;"><p>ws3 Websocket: server_denies_protocol</p></div>

<script>
var exitmsg = "Close, wait, and navigate to: browsertest2.html"

window.onload= function(){
	plog("init", "<p>:window.onload</p>");
	plog("browserid", getBrowser());
	plog("exitmsg", exitmsg);

	ws1 = addwebsocket("ws1");
	ws2 = addwebsocket("ws2", "websocket-testprotocol");
//	ws3 = addwebsocket("ws3", "server_denies");
	// control flow cedes to ws events.
} 

// log to DOM element ws 
function plog(ws, shtm){
	document.getElementById(ws).innerHTML += shtm
} 

function addwebsocket(instancename, subprotocol){
	var wsuri = document.URL.replace("http:","ws:");
	if (typeof subprotocol === "undefined") {
		var ws = new WebSocket(wsuri)
	} else {
		var ws = new WebSocket(wsuri, subprotocol)
	}
	ws.mynam = instancename;
	ws.onclose = function(e){
		plog(e.target.mynam, "<p>: " + e.target.mynam + ".onclose:" +
			"wasClean: " + e.wasClean + ";  " +
			"code: " + e.code + ";  " + codeDesc[e.code] + ";  " +
			"reason: " + e.reason + ";  " +
			"<br>&nbsp;&nbsp;Websocket state is now " + e.target.readyState +
			" " + readystateDesc[e.target.readyState] + ".</p>");
	}
	ws.onerror = function(e){
		plog(e.target.mynam, "<p>: " + e.target.mynam + ".onerror: " +
			"<br>&nbsp;&nbsp;Websocket state is now " + e.target.readyState +
			" " + readystateDesc[e.target.readyState] + ".</p>");
		}
	ws.onopen = function(e){
		var msg = "Ping me! This is " + e.target.mynam ;
		if(e.target.protocol!==""){
			msg += " on subprotocol " + e.target.protocol
		}
		msg += " in browser " + getBrowser() 
		plog(e.target.mynam, "<p>: " + e.target.mynam + ".onopen: " +
			"<br>&nbsp;&nbsp;Websocket state is now " + e.target.readyState +
			" " + readystateDesc[e.target.readyState] + 
			"</p><p>&nbsp;&nbsp;..Sending message: " + msg + "</p>");
		e.target.send(msg);
	}
	ws.onmessage	= function(e){
		var msg = e.data;
		plog(e.target.mynam, "<p>: " + e.target.mynam + ".onmessage: " + msg + "  </p>");
		if(msg == exitmsg) {
				plog(e.target.mynam, "<p>&nbsp;&nbsp; Reveived :" + msg + "</p>");
				var file = msg.split(": ")[1];
				plog(e.target.mynam, "<p>&nbsp;&nbsp; Calling close, will navigate to "+ file + " in 2 seconds</p>");
				e.target.close()
				setTimeout(navigate, 2000, file);
			} else {
				var msgecho = e.target.mynam + " echo: " + e.data;
				plog(e.target.mynam, "<p>&nbsp;&nbsp;" + msgecho + "</p>");
				e.target.send(e.target.mynam + " echo: " + e.data)
			}
	}
	plog(instancename, "<p>" + instancename + " created with event handlers.</p>");
	return ws
} // addwebsocket



// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
// small change Chrome > Blink, PhantomJS.
var getBrowser = function() {
	var isPhantom =  (navigator.userAgent == 'PhantomJS')
	// Opera 8.0+
	var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
	// Firefox 1.0+
	var isFirefox = typeof InstallTrigger !== 'undefined';
	// Safari 3.0+ "[object HTMLElementConstructor]"
	var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
	// Internet Explorer 6-11
	var isIE = /*@cc_on!@*/false || !!document.documentMode;
	// Edge 20+
	var isEdge = !isIE && !!window.StyleMedia;
	// Chrome 1+
	var isChrome = !!window.chrome && !!window.chrome.webstore;
	// Blink engine detection
	var isBlink = (isChrome || isOpera) && !!window.CSS;
	if(isPhantom){return "Phantom"};
	if(isChrome){return "Chrome"};
	if(isBlink){return "Blink"};
	if(isEdge){return "Edge"};
	if(isIE){return "Internet Explorer"};
	if(isSafari){return "Safari"};
	if(isFirefox){return "Firefox"};
	if(isOpera){return "Opera"};
	return "unknown";
}

function navigate(file){
	window.location.href = file
}
var codeDesc ={1000:"Normal",
1001:"Going Away",
1002:"Protocol Error",
1003:"Unsupported Data",
1004:"Reserved",
1005:"No Status Recvd- reserved",
1006:"Abnormal Closure- reserved",
1007:"Invalid frame payload data",
1008:"Policy Violation",
1009:"Message too big",
1010:"Missing Extension",
1011:"Internal Error",
1012:"Service Restart",
1013:"Try Again Later",
1014:"Bad Gateway",
1015:"TLS Handshake"};

var readystateDesc ={0:"CONNECTING",
1:"OPEN",
2:"CLOSING",
3:"CLOSED"};
</script>
</body>
</html>
